<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画 
		show()             功能：显示效果  本质：display：block
		hide()             功能：隐藏效果  本质：display：none
		
		slideDown()        功能：向下（滑动式）效果
		slideUp()          功能：向上（滑动式）效果
		
		fadeIn(毫秒数)      功能：淡入    本质  显示+透明度：0~1
		fadeOut(毫秒数)     功能：淡出    本质  显示+透明度：1~0
		-->
		
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #ff0;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">滑动式向下按钮</button>
		<button id="su">滑动式向上按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fu">淡出按钮</button>
		<div></div>
		<script>
			
			$("#fi").click(function(){
			// 	隐藏  css属性直接给元素设置	
			$("div").fadeIn();
			 });
			 $("#fu").click(function(){
			 // 	隐藏  css属性直接给元素设置	
			 $("div").fadeOut();
			  });
			  
			$("#sd").click(function(){
			// 	隐藏  css属性直接给元素设置	
			$("div").slideDown();
			 });
			 $("#su").click(function(){
			 // 	隐藏  css属性直接给元素设置	
			 $("div").slideUp();
			  });
			  
			  /*JQ 动画：显示与隐藏*/
			$("#show").click(function(){
			// 	隐藏  css属性直接给元素设置	
			$("div").show();
			 });
			 $("#hide").click(function(){
			 // 	隐藏  css属性直接给元素设置	
			 $("div").hide();
			  });
			
			// $("button").click(function(){
			// 	隐藏  css属性直接给元素设置
			// 	$("div").css("display","block").css("border-radius","50%");
			// });
		</script>
	</body>
</html>